<template>
    <div class="part2 mp">
        <TopNav title="新碟上架"></TopNav>
        <div class='disk-container'>
            <div class='inner'>
                <a class='left-arrow' @click="prev"></a>
                <div class='disk-displayer'>
                    <ul 
                        v-for="(item, aindex) in albums" 
                        :key="aindex" 
                        class="disk-ul" 
                        :class="{none: hasTransition}"    
                        :style="{left: (aindex - currentIndex)*645 +'px'}"
                        ref="diskUls"
                    >
                        <diskItem v-for="innerItem in item" :diskData="innerItem" :key='innerItem.id'></diskItem>
                    </ul>
                </div>
                <a class='right-arrow' @click="next"></a>
            </div>
        </div>
    </div>
</template>
<script>
import TopNav from "./top-nav";
import diskItem from 'Views/common/disk-item'

export default {
    name: 'diskList',

    data(){
        return {
            albums: [],
            currentIndex: 1,
            albumsLength: 0,
            hasTransition: false
        }
    },

    mounted() {
        this.$api['playlist/newDisk']({
            limit: 20,
            offset: 0 
        }).then(result => {
            let len = result.albums.length;
            let arr = new Array(len/5);
            
            for (let index = 0; index < arr.length; index++) {
                arr[index] = result.albums.splice(0, 5)
            };
            
            this.albums = arr;
            this.albumsLength = arr.length;

            let lastArr = this.albums[this.albums.length-1];
            let oneArr = this.albums[0];
            this.albums.push(oneArr)
            this.albums.unshift(lastArr);
        })
    },

    components: {
        TopNav,
        diskItem
    },

    methods: {
        prev(){
            let i = this.currentIndex - 1;
            this.currentIndex = i;
            this.hasTransition = false;

            if (this.currentIndex <= 0){
                setTimeout(() => {
                   this.hasTransition = true;
                   this.currentIndex = this.albumsLength
                }, 400)
            }
        },
        next(){
            let i = this.currentIndex + 1;
            this.currentIndex = i;
            this.hasTransition = false;

            if (this.currentIndex >= (this.albums.length - 1)){
                setTimeout(() => {
                   this.hasTransition = true;
                   this.currentIndex = 1
                }, 400)
            }
        }
    }
}
</script>
<style>
    .disk-container .disk-ul.none{
        transition: left 0s !important;
    }
</style>

<style lang="scss" scoped>
    $guide-dot: url(../../assets/images/index.png) no-repeat;

    .disk-container{
           position: relative;
            zoom: 1;
            height: 186px;
            margin: 20px 0 37px;
            border: 1px solid #d3d3d3;

        .disk-ul{
            position: absolute;
            top: 0;
            width: 645px;
            margin: 28px 0 0 0;
            transition: left .3s;
        }

        .left-arrow, .right-arrow{
            position: absolute;
            top: 71px;
            width: 17px;
            height: 17px;
            background: $guide-dot;
            cursor: pointer;
            z-index: 2;
        }

        .right-arrow{
            background-position: -300px -75px;
            right: 4px;

            &:hover{
                background-position: -320px -75px;
            }
        }
        .left-arrow{
            left: 4px;
            background-position: -260px -75px;

            &:hover{
                background-position: -280px -75px;
            }
        }
        .inner{
            height: 184px;
            padding-left: 16px;
            background: #f5f5f5;
            border: 1px solid #fff;
        }
        .disk-displayer{
            float: left;
            width: 645px;
            height: 180px;
            overflow: hidden;
            position: relative;
            
        }
    }
</style>

